@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">商品列表</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="op-bar" style="margin: 16px 0;">
                                            <el-button type="primary" @click="createGoods" size="mini">添加</el-button>
                                        </div>

                                        <el-table
                                            :data="goodsList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="title"
                                                label="商品名称"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                label="图片"
                                                width="100"
                                            >
                                                <template slot-scope="scope">
                                                    <el-image
                                                        style="width: 60px; height: 60px"
                                                        :src="scope.row.image"
                                                        :preview-src-list="[scope.row.image]"
                                                        fit="cover"></el-image>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="integral"
                                                label="积分"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="store"
                                                label="库存"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                label="操作"
                                                width="180"
                                            >
                                                <template slot-scope="scope">
                                                    <el-button @click="editGoods(scope.row)" type="primary" round plain size="small">编辑</el-button>
                                                    <el-button type="danger" round plain size="small" @click="delGoods(scope.row.id)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>


                                        <!-- 保存窗口 -->
                                        <el-dialog
                                            title="保存商品"
                                            :visible.sync="saveShow"
                                            width="600"
                                            >
                                            <div class="save-win" style="margin-right: 30px;">
                                                <el-form ref="saveForm" :model="saveForm" label-width="100px">
                                                    <el-form-item label="商品名称">
                                                        <el-input v-model="saveForm.title"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="积分">
                                                        <el-input v-model="saveForm.integral"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="库存">
                                                        <el-input v-model="saveForm.store"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="图片">
                                                        <el-upload
                                                            class="avatar-uploader"
                                                            action="/admin/games/uploadImg"
                                                            :show-file-list="false"
                                                            with-credentials
                                                            :on-success="uploadSuccess"
                                                            >
                                                            <img v-if="saveForm.image" :src="saveForm.image" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </el-form-item>
                                                    <el-form-item label="排序">
                                                        <el-input v-model="saveForm.sort"></el-input>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button type="primary" @click="saveGoods">保存</el-button>
                                                        <el-button @click="saveShow=false">取消</el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </el-dialog>

                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    goodsList: [],
                    saveShow: false,
                    saveForm: {
                        id: 0,
                        title: '',
                        image: '',
                        integral: 0,
                        store: 0,
                        sort: 0,
                    }
                }
            },
            mounted() {
                this.getGoodsList()
            },
            watch: {

            },
            methods: {
                getGoodsList() {
                    adminApi_getGoodsList().then(res => {
                        this.goodsList = res.data
                    })
                },
                uploadSuccess(res, file) {
                    this.saveForm.image = '/uploads/'+res.path
                    console.log(res, file)
                },
                saveGoods() {
                    adminApi_saveGoods(this.saveForm).then(res => {
                        this.$message.success('保存成功')
                        this.saveShow = false
                        this.getGoodsList()
                    }).catch(err => {
                        this.$message.error(err.message)
                    })
                },
                editGoods(goods) {
                    this.saveForm = goods
                    this.saveShow = true
                },
                createGoods() {
                    this.saveForm = {
                        id: 0,
                        title: '',
                        image: '',
                        integral: 0,
                        store: 0,
                        sort: 0,
                    }
                    this.saveShow = true
                },
                delGoods(id) {
                    this.$confirm('确认删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        adminApi_delGoods({id}).then(res => {
                            this.$message.success('删除成功')
                            this.getGoodsList()
                        })
                    }).catch(() => {});

                }
            },
        })
    </script>
    </body>


    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
@endsection
